<template>

  <el-dialog :title="$t('page-trade-refund.dialog-batch-add.title')" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" label-width="80px">
      <el-form-item :label="$t('page-trade-refund.dialog-batch-add.file')" size="mini" prop="file">
        <el-upload
				  class="upload-demo"
				  ref="upload"
				  :limit="1"
				  :multiple="false"
				  :action="uploadUrl"
				  :headers="uploadHeaders"
				  :auto-upload="false"
				  :file-list="file"
          :on-change="handleFileChange"
				  :on-success="handleFileUpload">
				  <el-button slot="trigger" size="small" type="primary">{{ $t('page-trade-refund.dialog-batch-add.file') }}</el-button>
				  <div slot="tip" class="el-upload__tip">
				  	<p>上传注意事项:</p>
						<p>1.上传文件为txt类型, 字符编码utf8</p>
						<p>2.文件内容:交易流水号,退款金额,退款原因,退款备注</p>
						<p>3.分别用英文逗号隔开</p>
						<p>4.一行内容为一条退款信息</p>
						<p>例如:</p>
						<p>BR1508100956058644,0.1,批量退款1,备注1</p>
						<p>BR1508100956058644,0.1,批量退款2,备注2</p>
						<p>BR1506231111154493,0.1,批量退款3,备注3</p>
				  </div>
				</el-upload>
      </el-form-item>
  	</el-form>

		<div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">{{ $t('page-trade-refund.dialog-batch-add.cancel') }}</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">{{ $t('page-trade-refund.dialog-batch-add.submit') }}</el-button>
    </div>

	</el-dialog>

</template>

<script>

import ApiMain from '@/api/trade.refund';
import util from '@/libs/util.js';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {
    	dialogVisible: false,
    	loading: false,
    	uploadUrl: util.getUploadUrl('tradeorderrefund/upload'),
    	uploadHeaders: util.getUploadHeader(),
    	form: {},
    	file: [],
    }
  },

  mounted () {
  },

  methods: {

    show () {
    	this.file = []
      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    submit() {
      if (this.file.length == 0) {
        this.$message({message: '请选择文件', type: 'error'});
        return
      }
    	this.loading = true;
      this.$refs.upload.submit();
    },

    handleFileChange (file, fileList) {
      this.file = fileList
    },

    handleFileUpload (res, file) {
    	this.loading = false;
    	if (res.code != 0) {
    		this.$message({message: res.message, type: 'error'});
    	} else {
    		if (res.message == 'success' || res.message == '') {
    			this.$message({message: '上传成功', type: 'success'});
    		} else {
    			this.$alert(res.message, '上传完成提示', {
	          confirmButtonText: '确定'
	        });
    		}
    	}
      this.$refs.upload.clearFiles()
    	this.close()
    	console.log(res, file)
    }
  }
}

</script>

<style lang="scss">
.el-upload__tip {
	p {
		line-height: 20px;
		margin: 5px 0;
	}
}
</style>
